import { useState } from "react";
import Header from "@/components/Header";
import List from "@/components/List";
import { reqGitHubUserList } from "@/api";
import "./App.less";
const App = () => {
  const [userList, setUserList] = useState([]);

  //在App中封装一个函数,进行请求数据 然后把函数传递给header组件 header组件随时调用

  const getUserList = async (searchKey) => {
    //判断输入的内容是否为空，如果为空，则不再向下执行
    if (!searchKey.trim()) {
      return alert("输入内容不能为空");
    }

    //发送请求
    const result = await reqGitHubUserList(searchKey);

    //把请求结果 传递给父组件
    setUserList(result.items);
  };

  return (
    <div style={{ width: "900px", margin: "0 auto" }}>
      <Header getUserList={getUserList} />
      <List userList={userList} />
    </div>
  );
};

export default App;
